<script setup>

</script>

<template>

  <div class="big">


    <div style="margin-top: 10px">

      <el-input v-model="formData.chname" placeholder="请输入车场名称" :maxlength="11" show-word-limit
                :disabled='true' clearable prefix-icon='el-icon-mobile' :style="{width: '20%'}"></el-input>

    </div>


    <div>
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane label="规则设置" name="first">


          <div class="app-container">
            <el-form :model="rulesParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                     label-width="68px">


              <el-form-item label="规则名称" prop="ruleName">
                <el-input
                  v-model="rulesParams.ruleName"
                  placeholder="请输入规则名称"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>


              <el-form-item label="收费类型" prop="chtrid">
                <el-select v-model="rulesParams.chtrid" placeholder="请选择">
                  <el-option
                    v-for="item in this.rulestypesList"
                    :key="item.chtrid"
                    :label="item.tollRulesName"
                    :value="item.chtrid">
                  </el-option>
                </el-select>
              </el-form-item>


              <el-form-item label="车牌颜色" prop="lpcid">
                <el-select v-model="rulesParams.lpcid" placeholder="请输入车牌颜色">
                  <el-option
                    v-for="item in this.colorsList"
                    :key="item.lpcid"
                    :label="item.carsPlateName"
                    :value="item.lpcid">
                  </el-option>
                </el-select>
              </el-form-item>


              <el-form-item label="车辆类型" prop="carsTypeid">
                <el-select v-model="rulesParams.carsTypeid" placeholder="请输入车辆类型">
                  <el-option
                    v-for="item in this.carsTypeList"
                    :key="item.carsType.ctid"
                    :label="item.carsType.typeName"
                    :value="item.carsType.ctid">
                  </el-option>
                </el-select>
              </el-form-item>


              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" type="primary" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>

            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-plus"
                  @click="handleAdd"
                  v-hasPermi="['example:rules:add']"
                >新增规则
                </el-button>
              </el-col>

              <!--              <el-col :span="1.5">-->
              <!--                <el-button-->
              <!--                  type="warning"-->
              <!--                  plain-->
              <!--                  icon="el-icon-download"-->
              <!--                  size="mini"-->
              <!--                  @click="handleExport"-->
              <!--                  v-hasPermi="['example:rules:export']"-->
              <!--                >导出-->
              <!--                </el-button>-->
              <!--              </el-col>-->
              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>


            <el-table v-loading="loading" :data="rulesList">
              <el-table-column label="规则id" align="center" prop="chrid" width="150"/>
              <el-table-column label="车场名称" align="center" prop="carsHome.chname" width="150"/>
              <el-table-column label="规则名称" align="center" prop="ruleName" width="150"/>
              <el-table-column label="收费类型" align="center" prop="carsHomeTollRules.tollRulesName" width="150"/>
              <el-table-column label="节假日" align="center" prop="holidaysFree" :formatter="showfree" width="150"/>
              <el-table-column label="车牌颜色" align="center" prop="carsPlateColors.carsPlateName" width="150"/>
              <el-table-column label="车辆类型" align="center" prop="carsType.typeName" width="150"/>
              <el-table-column label="规则详情" align="center" prop="rulesTxt" width="150"/>
              <el-table-column fixed="right" label="操作" align="center" width="200">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleLook(scope.row)"
                    v-hasPermi="['example:rules:edit']"
                  >查看详细规则
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                    v-hasPermi="['example:rules:edit']"
                  >修改
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                    v-hasPermi="['example:rules:remove']"
                  >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>


            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="rulesParams.pageNum"
              :limit.sync="rulesParams.pageSize"
              @pagination="getList"
            />
          </div>


<!--          -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->

        </el-tab-pane>
<!--        <el-tab-pane label="车辆类型" name="second">车辆类型</el-tab-pane>-->
        <el-tab-pane label="节假日管理" name="third">

          <div class="app-container">
            <el-form :model="queryParamsHoliday" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

              <el-form-item label="节假名字" prop="holidayName">
                <el-input
                  v-model="queryParamsHoliday.holidayName"
                  placeholder="请输入节假日名字"
                  clearable
                  @keyup.enter.native="handleQueryHoliday"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryHoliday">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQueryHoliday">重置</el-button>
                <el-button icon="el-icon-plus" size="mini" @click="handleAddHoliday">新增</el-button>
              </el-form-item>
            </el-form>

            <el-table v-loading="loading" :data="holidaysList" >
              <el-table-column label="节假日ID" align="center" prop="id" />
              <el-table-column label="节假日名字" align="center" prop="holidayName" />
              <el-table-column label="节假日开始时间" align="center" prop="beginTime" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.beginTime, '{y}-{m}-{d}  {h}:{m}:{s}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="节假日结束时间" align="center" prop="endTime" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
                </template>
              </el-table-column>

              <el-table-column label="车场名字" align="center" prop="chid" :formatter="showCarsHome"/>
              <el-table-column label="创建时间" align="center" prop="createTime" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdateHoliday(scope.row)"
                    v-hasPermi="['sys-cars-home:holidays:edit']"
                  >修改</el-button>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDeleteHoliday(scope.row)"
                    v-hasPermi="['sys-cars-home:holidays:remove']"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <pagination
              v-show="totalHoliday>0"
              :total="totalHoliday"
              :page.sync="queryParamsHoliday.pageNum"
              :limit.sync="queryParamsHoliday.pageSize"
              @pagination="getListHoliday"
            />
          </div>


        </el-tab-pane>
        <el-tab-pane label="微信分账配置" name="five">
          <div class="app-container">
            <el-table v-loading="loading" :data="weChatList">
              <el-table-column label="自增ID" align="center" prop="id" />
              <el-table-column label="商户类型" align="center" prop="merchantType" :formatter="showType" />
              <el-table-column label="商户模式" align="center" prop="merchantMode" :formatter="showMode" />
              <el-table-column label="商户名" align="center" prop="merchantName" v-if="this.Wechat.type===0"/>
              <el-table-column label="商户号" align="center" prop="merchantId" v-if="this.Wechat.type===0"/>
              <el-table-column label="微信支付签名" align="center" prop="wechatSignature" v-if="this.Wechat.type===0"/>
              <el-table-column label="商家占比" align="center" prop="merchantRatio" v-if="this.Wechat.type===0 && this.Wechat.mode==1"/>
              <el-table-column label="车场占比" align="center" prop="carsHomeRatio" v-if="this.Wechat.type===0 && this.Wechat.mode==1"/>
              <el-table-column label="姓名" align="center" prop="name" v-if="this.Wechat.type==1 "/>
              <el-table-column label="手机号" align="center" prop="phone" v-if="this.Wechat.type==1 "/>
              <el-table-column label="openId" align="center" prop="openId" v-if="this.Wechat.type==1 "/>
              <el-table-column label="个人占比(%)" align="center" prop="individualRatio" v-if="this.Wechat.type==1 && this.Wechat.mode"/>
              <el-table-column label="车场占比(%)" align="center" prop="carsHomeRatio" v-if="this.Wechat.mode==1"/>
            </el-table>
          </div>





        </el-tab-pane>
        <el-tab-pane label="支付宝分账配置" name="six">

          <div class="app-containers">
            <el-table v-loading="loading" :data="alipayList" @selection-change="handleSelectionChange">


              <el-table-column label="支付宝账号" align="center" prop="alipayAccount" />
              <el-table-column label="账号真实姓名" align="center" prop="accountName" />
              <el-table-column label="个人占比(%)" align="center" prop="individualRatioAli" />
              <el-table-column label="车场占比(%)" align="center" prop="carsHomeRatioAli" />

            </el-table>
          </div>



















        </el-tab-pane>
      </el-tabs>
    </div>

  </div>

</template>
<script>
import {listRules, getRules, delRules, addRules, updateRules} from "@/api/modules/sys-cars-home/carshomerules/rules";
import {listType} from "@/api/modules/sys-cars-home/type/type";
import {listRulestype} from "@/api/modules/sys-cars-home/carshomerules/rulestypes";
import {listColors} from "@/api/modules/sys-cars-home/carshomerules/colors";
import {getCt, listCt} from "@/api/info/ct";
import {getTime, listTime} from "@/api/modules/sys-cars-home/api/time";
import {
  addHolidays,
  delHolidays,
  getHolidays,
  listHolidays,
  updateHolidays
} from "@/api/modules/sys-cars-home/api/holidays";
import {listWeChat} from "@/api/modules/sys-cars-home/pay/weChat";
import {listAlipay} from "@/api/modules/sys-cars-home/pay/alipay";

export default {
  name: "Rules",
  components: {},
  props: [],
  data() {
    return {

      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      totalHoliday:0,
      // 车场计费规则表格数据
      rulesList: [],
      // 车场计费规则类型表格数据
      rulestypesList: [],
      // 车辆牌照颜色表格数据
      colorsList: [],
      //车型
      carsTypeList: [],

      // 微信支付表格数据
      weChatList: [],
      // 支付宝支付配置表格数据
      alipayList: [],

      // 查询参数
      rulesParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        status: null,
        deleted: null,
        chid: null,
        ruleName: null,
        chtrid: null,
        holidaysFree: null,

        carsTypeid: null,
        rulesTxt: null,


        lpcid: null,
        carsPlateName: null,

        chname: null,

      },

      timeParams: {
        code: null
      },
      // 收费规则类型 查询参数
      RulestypeParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        status: null,
        deleted: null,
        tollRulesName: null
      },
      // 车牌颜色 查询参数
      carsColorsParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        status: null,
        deleted: null,
        carsPlateName: null
      },

      // 表单参数
      form: {},


      formData: {
        chname: null,
        chid: null
      },

      activeName: 'first',
      formct: {
        chid: null
      },
      //节假日

      // 车场节假日表格数据
      holidaysList: [],


      // 查询参数
      queryParamsHoliday: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        status: null,
        deleted: null,
        endTime: null,
        chid: null,
        holidayName: null
      },
      // 表单参数
      formHoliday: {},

      queryParamsWeChat:{
        chid:null
      },

      Wechat:{
        type:null,
        mode:null,
      },

      Ali:{
        type:null,
        mode:null,
      }


    }
  },
  computed: {},
  watch: {},


  created() {
    this.formData.chname = this.$route.query.chname;
    this.formData.chid = this.$route.query.chid;
    this.rulesParams.chid = this.$route.query.chid;
    this.getList()
    this.getRulesType();
    this.getCarsColors()
    this.getCarsTypeList()


    this.getListHoliday()
    this.getListWeChat()
    this.getListAli()


    // listTime(this.timeParams).then(res=>{
    //
    // })
  },
  mounted() {


  },
  methods: {


    showType(row, column, cellValue, index,) {
      if (cellValue) {
        return "个人";
      }
      return "商家"
    },

    showMode(row, column, cellValue, index,) {
      if (cellValue) {
        return "多商户";
      }
      return "单商户";
    },


    /** 查询微信支付列表 */
    getListWeChat() {
      this.queryParamsWeChat.chid=this.$route.query.chid;

      listWeChat(this.queryParamsWeChat).then(response => {
        this.weChatList = response.rows;

        this.Wechat.type=this.weChatList[0].merchantType
        this.Wechat.mode=this.weChatList[0].merchantMode

      });
    },
    /** 查询支付宝支付配置列表 */
    getListAli() {

      listAlipay(this.queryParamsWeChat).then(response => {
        this.alipayList = response.rows;
      });
    },

    showfree(row, column, cellValue, index,) {
      if (cellValue) {
        return "免费";
      }
      return "不免费";
    },


    /** 查询车场收费规则类型列表 */
    getRulesType() {
      this.loading = true;
      listRulestype(this.RulestypeParams).then(response => {
        this.rulestypesList = response.rows;
        this.loading = false;
      });
    },

    /** 查询车牌颜色类型列表 */
    getCarsColors() {
      this.loading = true;
      listColors(this.carsColorsParams).then(response => {
        this.colorsList = response.rows;
        this.loading = false;
      });
    },
//获取车型
    getCarsTypeList() {
      this.formct.chid = this.$route.query.chid
      listCt(this.formct).then(res => {
        this.carsTypeList = res.rows
      })
    },

    /** 查询车场计费规则列表 */
    getList() {
      this.loading = true;
      listRules(this.rulesParams).then(response => {
        this.rulesList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },


    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },


    // 表单重置
    reset() {
      this.form = {
        chrid: null,
        code: null,
        status: null,
        deleted: null,
        createTime: null,
        updateTime: null,
        chid: null,
        ruleName: null,
        chtrid: null,
        holidaysFree: null,
        lpcid: null,
        carsTypeid: null,
        rulesTxt: null
      };
      this.resetForm("form");
    },


    /** 搜索按钮操作 */
    handleQuery() {
      this.rulesParams.pageNum = 1;
      this.getList();
    },


    /**
     * 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },


    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.$router.push({
        path: "ruleedit", query: {
          chid: this.$route.query.chid,
          chname: this.$route.query.chname,
          message: "新增"
        }
      })
    },


    /** 查看按钮操作 */
    handleLook(row) {
      this.reset();
      const chrid = row.chrid;
      const chtrid = row.chtrid;
      const ruleTxt = row.rulesTxt;
      this.$router.push({
        path: "ruleedit",
        query: {
          chid:this.$route.query.chid,
          chname: this.$route.query.chname,
          chrid: chrid,
          chtrid: chtrid,
          rulesTxt: ruleTxt,
          message: "查看"
        }
      })
    },


    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const chrid = row.chrid;
      const chtrid = row.chtrid;
      const ruleTxt = row.rulesTxt;
      this.$router.push({
        path: "ruleedit",
        query: {
          chid:this.$route.query.chid,
          chname: this.$route.query.chname,
          chrid: chrid,
          chtrid: chtrid,
          rulesTxt: ruleTxt,
          message: "修改"
        }
      })
    },


    //
    // /** 提交按钮 */
    // submitForm() {
    //   this.$refs["form"].validate(valid => {
    //     if (valid) {
    //       if (this.form.chrid != null) {
    //         updateRules(this.form).then(response => {
    //           this.$modal.msgSuccess("修改成功");
    //           this.open = false;
    //           this.getList();
    //         });
    //       } else {
    //         addRules(this.form).then(response => {
    //           this.$modal.msgSuccess("新增成功");
    //           this.open = false;
    //           this.getList();
    //         });
    //       }
    //     }
    //   });
    // },


    /** 删除按钮操作 */
    handleDelete(row) {
      const chrids = row.chrid;
      this.$modal.confirm('是否确认删除车场计费规则编号为"' + chrids + '"的数据项？').then(function () {
        return delRules(chrids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },


    // ------------------------------------------------


    /** 查询车场节假日列表 */
    getListHoliday() {
      this.loading = true;
      listHolidays(this.queryParamsHoliday).then(response => {
        this.holidaysList = response.rows;
        this.totalHoliday = response.total;
        this.loading = false;
      });
    },

    // 表单重置
    resetHoliday() {
      this.formHoliday = {
        id: null,
        code: null,
        status: null,
        deleted: null,
        createTime: null,
        updateTime: null,
        endTime: null,
        chid: null,
        holidayName: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQueryHoliday() {
      this.queryParamsHoliday.pageNum = 1;
      this.getListHoliday();
    },

    /** 重置按钮操作 */
    resetQueryHoliday() {
      this.resetForm("queryForm");
      this.handleQueryHoliday();
    },

    /** 新增按钮操作 */
    handleAddHoliday() {
      this.reset();
      this.$router.push({path:"holidaysedit",query:{
          chid:this.$route.query.chid,
          chname: this.$route.query.chname,
          message: "新增"
        }})
    },
    /** 修改按钮操作 */
    handleUpdateHoliday(row) {
      this.reset();
      const id = row.id
      this.$router.push({path:"holidaysedit",query:{
          chid:this.$route.query.chid,
          chname: this.$route.query.chname,
          id:id,
          message: "修改"
        }})


    },
    // /** 提交按钮 */
    // submitFormHoliday() {
    //   this.$refs["form"].validate(valid => {
    //     if (valid) {
    //       if (this.form.id != null) {
    //         updateHolidays(this.form).then(response => {
    //           this.$modal.msgSuccess("修改成功");
    //           this.open = false;
    //           this.getList();
    //         });
    //       } else {
    //         addHolidays(this.form).then(response => {
    //           this.$modal.msgSuccess("新增成功");
    //           this.open = false;
    //           this.getList();
    //         });
    //       }
    //     }
    //   });
    // },
    /** 删除按钮操作 */
    handleDeleteHoliday(row) {
      const ids = row.id ;
      this.$modal.confirm('是否确认删除车场节假日编号为"' + ids + '"的数据项？').then(function() {
        return delHolidays(ids);
      }).then(() => {
        this.getListHoliday();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    showCarsHome(){
      return this.$route.query.chname
    }


  }
}


</script>
<style scoped lang="scss">

</style>
